<template>
	<view class="content">
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="list">
				<text class="name">开票日期</text>
				<uni-datetime-picker type="date" v-model="item.invoice_time" class="val">
					<text v-if="!item.invoice_time" class="tips">请选择</text>
					<text v-else class="form-input">{{item.invoice_time}}</text>
				</uni-datetime-picker>
			</view>
			<view class="list">
				<text class="name">发票代码</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips"
					v-model="item.invoice_sn_code" />
			</view>
			<view class="list">
				<text class="name">发票号码</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips"
					v-model="item.invoice_number" />
			</view>
			<view class="list">
				<text class="name">开票金额(元)</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="item.money"
					@blur="fixed(index,'money')" />
			</view>
			<view class="list">
				<text class="name">税率(%)</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="item.tax_rate"
					@blur="fixed(index,'tax_rate')" />
			</view>
			<view class="list">
				<text class="name">含税金额(元)</text>
				<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="item.tax_money"
					@blur="fixed(index,'tax_money')" />
			</view>
			<view class="title">
				<text>请选择并上传发票</text>
				<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(url,num) in item.invoice_url">
				<view class="url">
					{{url}}
				</view>
				<button class="btn" @tap="previewFile(url)">查看</button>
				<button class="btn" @tap="del(index,num)">删除</button>
			</view>
			<view class="upload">
				<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile(index)"></uni-icons>
				<!-- <uni-icons type="closeempty" size="30" color="#999" class="del" v-if="item.invoice_url"
					@tap="item.invoice_url =''"></uni-icons> -->
				<!-- <image :src="item.invoice_url" mode="aspectFill" class="img" v-if="item.invoice_url"
					@tap="preview(item.invoice_url)"></image> -->
			</view>
			<!-- <view class="delbtn" @tap="del(index)" v-if="item.invoice_url">删除发票</view> -->
		</view>
		<view class="btn" @tap="add">添加发票</view>

		<view class="btnbox">
			<view class="btn" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script setup>
	import {
		uploadInvoice
	} from '../../../network/main.js';
	import uploadUrl from '../../../network/utils.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	onLoad((res) => {
		id.value = res.id
	})
	const id = ref('')
	const list = reactive([{
		invoice_url: [],
		invoice_time: '',
		invoice_sn_code: '',
		invoice_number: '',
		money: '',
		tax_rate: '',
		tax_money: ''
	}])
	const choosefile = (index) => {
		// #ifdef  APP-PLUS
		let fileTypes = ["doc", "docx", "xls", "xlsx", "pdf", "txt", "pptx"]
		let chooseFile = plus.io.chooseFile({
			title: '选择文件',
			filetypes: fileTypes,
			multiple: false
		}, (e) => {
			uni.uploadFile({
				url: uploadUrl.uploadUrl,
				filePath: e.files[0],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				formData: {
					file: e.files[0]
				},
				success(response) {
					let data = JSON.parse(response.data)
					list[index].invoice_url.push(data.data.fullurl)
				}
			})
		})
		// #endif

		//#ifndef  APP-PLUS	
		H5upload(index)
		//#endif
	}
	const H5upload = (index) => {
		uni.chooseFile({
			count: 1,
			complete(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFilePaths[0]
					},
					success(response) {
						let data = JSON.parse(response.data)
						list[index].invoice_url.push(data.data.fullurl)
					}
				})
			}
		})
	}
	const previewFile = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const del = (index, num) => {
		list[index].invoice_url.splice(num, 1)
	}
	const add = () => {
		let obj = {
			invoice_url: [],
			invoice_time: '',
			invoice_sn_code: '',
			invoice_number: '',
			money: '',
			tax_rate: '',
			tax_money: ''
		}
		list.push(obj)
	}
	const fixed = (index, type) => {
		if (type == 'money') {
			list[index].money = (list[index].money * 1).toFixed(2)
		} else if (type == 'tax_rate') {
			list[index].tax_rate = (list[index].tax_rate * 1).toFixed(6)
		} else if (type == 'tax_money') {
			list[index].tax_money = (list[index].tax_money * 1).toFixed(2)
		}
	}
	const submit = () => {
		let data = {
			id: id.value,
			data: list
		}
		uploadInvoice(data).then(res => {
			uni.showToast({
				title: '提交成功'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 300)
		})
	}
</script>

<style lang="scss">
	.content {
		margin-top: 2rpx;
		background-color: #f7f7f7;
		width: 100%;
		padding-bottom: 160rpx;
	}

	.box {
		width: 100%;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 20rpx 0;
		position: relative;
	}

	.list {
		padding: 10rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		background-color: #fff;
		font-size: 28rpx;
		justify-content: space-between;

		.name {
			width: 200rpx;
		}

		.tips {
			color: #999;
			width: 400rpx;
			text-align: right;
			font-size: 24rpx;
		}

		.val {
			color: #333;
			width: 400rpx;
			text-align: right;
		}
	}

	.delbtn {
		width: 200rpx;
		background-color: #ffc400;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}

	.title {
		margin-bottom: 30rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		gap: 10rpx;

		.icon {
			font-size: 40rpx;
			color: #ff6700;
		}
	}

	.file {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0;

		.url {
			width: 400rpx;
			font-size: 24rpx;
			color: #f6bf00;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.btn {
			width: 120rpx;
			height: 60rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #f6bf00;
			margin: 0;
		}
	}

	.upload {
		width: 220rpx;
		height: 220rpx;
		border: 2rpx solid #f7f7f7;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.del {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.btn {
		width: 400rpx;
		background-color: #ffc400;
		line-height: 60rpx;
		text-align: center;
		margin: 40rpx auto;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.btnbox {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		padding: 10rpx 0;
		background-color: #fff;
		border-top: 2rpx solid #f7f7f7;
	}
</style>